<template>
	<div>
		<div>
			<h1 style="margin-bottom:0;">{{tittle}}</h1>
		</div>
		
		<div id="container" style="width:100%">
		
			<div id="header" style="background-color:#FFA500;">
				<div class="container navigation">
					<div class="row">
						<div class="col nav">
							<ul class="pc-nav" id="runoob-detail-nav">
								<li><a href="//www.runoob.com/">首页</a></li>
								<li><a href="/html/html-tutorial.html">HTML</a></li>
								<li><a href="/css/css-tutorial.html">CSS</a></li>
								<li><a href="/js/js-tutorial.html">JavaScript</a></li>
								<li><a href="javascript:void(0);" data-id="vue">Vue</a></li>
								<li><a href="javascript:void(0);" data-id="bootstrap">Bootstrap</a></li>
								<li><a href="/nodejs/nodejs-tutorial.html">NodeJS</a></li>
								<li><a href="/python3/python3-tutorial.html">Python3</a></li>
								<li><a href="/python/python-tutorial.html">Python2</a></li>
								<li><a href="/java/java-tutorial.html">Java</a></li>
								<li><a href="/cprogramming/c-tutorial.html">C</a></li>
								<li><a href="/cplusplus/cpp-tutorial.html">C++</a></li>
								<li><a href="/csharp/csharp-tutorial.html">C#</a></li>
								<li><a href="/go/go-tutorial.html">Go</a></li>
								<li><a href="/sql/sql-tutorial.html">SQL</a></li>
								<li><a href="/linux/linux-tutorial.html">Linux</a></li>
								<li><a href="/jquery/jquery-tutorial.html">jQuery</a></li>
								<li><a href="/browser-history">本地书签</a></li>

							</ul>
		
						</div>
					</div>
				</div>
		
			</div>
		
			<div id="menu" style="background-color:#8ABEB7;width:13%;height: 1500px;float:left;">
				
				<ul>
					<li  v-bind:class="[index!=0 ?  'a1': 'a111']"  v-for="value,index in head1">
						{{value}}
					</li>
				</ul>
			</div>
		
			<div id="content"
				 style="background-color:#EEEEEE;;width:63%;height: 1500px;    margin-left: 18px;    padding-left: 20px; float:left;">
				<div><h1><span style="text-align: center">49 韦千禧</span></h1>
					<hr>
				</div>
				<div>
					<IFRAME src="https://cn.vuejs.org/" style="width: 100%;height: 800px">
		
					</IFRAME>
				</div>
			</div>
		
		
			<div id="menu2" style="background-color:#8ABEB7;width:20%;height: 1500px;float:right;">
				<ul>
					<li v-bind:class="[index!=0 ?  'a1': 'a111']"  v-for="value,index in head2">
						{{value}}
					</li>
				</ul>
			</div>
		
		</div>
	</div>
</template>

<script>
	export default {
	  name: 'shiyan',
	  props: {
	    msg: String,
	  },
	  data () {
	        return {
	          tittle: "实验二",
			  head1:["HTML基础教程", "HTML XHTML", "HTML 表单", "HTML 图形", "HTML 媒体",'HTML5' ,'HTML API',' 实例/测验/总结' ,'HTML参考手册' ,'建站手册 '],
			  head2:["网站构建", '万维网联盟W3C', '浏览器信息', '网站品质', '语义网', '职业规划', '网站主机', '关于W3School', '帮助W3School'],
	        }
	      },
		  methods:{
			  
		  },
	}
</script>

<style>
	.navigation {
	    background: #96b97d;
	}
	
	.container {
	    padding-left: 10px;
	    padding-right: 10px;
	}
	.row {
	    width: 100%;
	    max-width: 1260px;
	    min-width: 755px;
	    margin: 0 auto;
	    overflow: hidden;
	}
	.nav {
	    text-transform: uppercase;
	}
	
	.nav ul, .nav-sub ul {
	    list-style: none;
	    white-space: nowrap;
	}
	
	li, ol, p, ul {
	    line-height: 1.5em;
	}
	
	.nav li, .nav-sub li {
	    display: inline;
	    margin: 0 20px 0 0;
	}
	.a1{
	    padding-left: 15px;
		padding-top: 15px;
	}
	.a111{
		padding-left: 15px;
	}
	li{list-style: none;}
</style>